<template>
    <transition :name="animateName" appear>
        <div class="sff-pop" v-show="show.value">
            <div class="sff-pop-cont">
                <div class="sff-pop-cont-cont">
                    <section v-html="option.value.text" @click="option.value.close"></section>
                </div>
                <div class="sff-pop-btns">
                    <span class="sff-cancel" @click="option.value.cancel"
                        v-if="option.value.cancelBtn">{{option.value.cancelText}}</span>
                    <span class="sff-ok sff-ok-loading"
                        v-if="option.value.okLoading">{{option.value.okLoadingText}}</span>
                    <span class="sff-ok" @click="okHandler" v-if="!option.value.okLoading && option.value.okBtn"
                        v-html="option.value.okText"></span>
                </div>
            </div>
        </div>
    </transition>
</template>
<script setup>
    import {
        ref
    } from 'vue'
    const animateName = ref('opacity')
    const props = defineProps({
        show: Object,
        option: Object,
    })
    const okHandler = () => {
        props.option.value.ok();
    }
</script>
<style scoped>
    .sff-pop {
        position: fixed;
        z-index: 9999999;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
    }

    .sff-pop-cont {
        position: absolute;
        width: 6.86rem;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        background-color: #fff;
        color: #505050;
        border-radius: .08rem;
    }

    .sff-pop-cont-cont {
        font-size: .32rem;
        padding: .6rem .32rem;
        line-height: .45rem;
        min-height: 1.6rem;
        text-align: center;
    }

    .sff-pop-cont-cont section {
        display: inline-block;
        text-align: left;
    }

    .sff-pop-cont-cont b {
        color: #e64f4c;
        padding: 0 .05rem;
    }

    .sff-pop-btns {
        display: flex;
    }

    .sff-pop-btns span {
        flex: 1;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        font-size: .36rem;
        color: #666;
        border-top: solid 1px #e3e3e3;
    }

    .sff-pop-btns span.sff-ok {
        color: #e64f4c;
    }

    .sff-pop-btns span:last-child {
        border-left: solid 1px #e3e3e3;
    }

    .sff-pop-btns span:first-child {
        border-left: 0;
    }

    .sff-pop-btns span.sff-ok-loading {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sff-ok-loading::before {
        content: '';
        border: solid 1px #e64f4c;
        border-top-color: transparent;
        border-radius: 50%;
        width: .3rem;
        height: .3rem;
        margin-right: .08rem;
        animation: rotate .6s linear infinite;
    }

    @-webkit-keyframes rotate {
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }

    .opacity-enter-active {
        animation: sf-fade-in .4s
    }

    .opacity-leave-active {
        animation: sf-fade-out .4s
    }


    @keyframes sf-fade-in {
        0% {
            opacity: 0;
            transform: translate3d(0, -10px, 0);
        }
    }

    @keyframes sf-fade-out {
        100% {
            opacity: 0;
            transform: translate3d(0, 10px, 0);
        }
    }


    body.sf-app-dark .sff-pop-cont {
        background-color: #181818;
    }

    body.sf-app-dark .sff-pop-cont-cont section {
        color: #909ead;
    }

    body.sf-app-dark .sff-pop-btns span,
    body.sf-app-dark .sff-pop-btns span:last-child {
        border-color: #2a2b2d;
    }
</style>